<template>
    <div class="cell-item">
        <LabelRow v-bind:label="label" v-bind:text="'共'+dataList.length+'条记录'"></LabelRow>
        <ul class="cell-ul">
            <li v-for="(item,index) in dataList" 
                v-show = "item.status !== '锁定'"
                :key="index" class="cell-li">
                <i class="triangle"></i>
                <div class="cell-label">
                    <div class="text-over">
                        <span>智能柜</span>
                        <span class="db-num">[{{item.xmbh}}]</span>
                        <span>柜有审批件待取</span>
                    </div>
                </div>
                <div class="db-date">{{getDate(item.usetime)}}</div>
            </li>
            <div v-if = "!dataList.length" class="no-data">
                <img src="../../assets/no-data.png" alt="">
            </div>
        </ul>
    </div>
</template>
<script>
import LabelRow from "../common/labelRow.vue";
import {getTimeStr} from "../../utils";
import Pubsub from "../../utils/pubsub";
export default {
    props: ["list"],
    components: {
        LabelRow
    },
    data() {
        return {
            label: {
                url: require("../../assets/unifyAcceptWorkbench/dbsx-icon.png"),
                label: "待办事项"
            },
            dataList: []
        };
    },
 
    methods: {
        getDate(tamp){
            return getTimeStr(tamp)
        }
    },
    watch: {
        list:function(o,n){
            this.dataList = o;
        }
    },
};
</script>

<style lang="scss" scoped>
@import "../../css/unifyAcceptWorkbench.scss";
.db-num {
    color: #ffaa00;
}
.db-date {
    color: #888888;
}
.triangle {
    height: 0;
    width: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 9px solid black;
    margin-right: 15px;
}
</style>
